﻿<FluentStack Orientation="@Orientation.Horizontal">
    <FluentTreeView>
        <FluentTreeItem @bind-Expanded=@FlowersExpanded>
            Flowers
            <FluentTreeItem @bind-Selected=DaisySelected>Daisy</FluentTreeItem>
            <FluentTreeItem @bind-Selected=SunflowerSelected>Sunflower</FluentTreeItem>
            <FluentTreeItem @bind-Selected=RoseSelected>Rose</FluentTreeItem>
        </FluentTreeItem>
        <FluentTreeItem @bind-Expanded=@PlanesExpanded>
            Planes
            <FluentTreeItem>Tomcat</FluentTreeItem>
            <FluentTreeItem>Hawker Harrier</FluentTreeItem>
            <FluentTreeItem>Cesna</FluentTreeItem>
        </FluentTreeItem>
    </FluentTreeView>
    <FluentStack Orientation="@Orientation.Vertical">
        <h2>Expanded</h2>
        <FluentCheckbox @bind-Value=FlowersExpanded>
            <span aria-label="Flowers expanded">Flowers expanded</span>
        </FluentCheckbox>
        <FluentCheckbox @bind-Value=PlanesExpanded>
            <span aria-label="Planes expanded">Planes expanded</span>
        </FluentCheckbox>
    </FluentStack>
    <FluentStack Orientation="@Orientation.Vertical">
        <h2>Selected</h2>
        <FluentCheckbox @bind-Value=DaisySelected>
            <span aria-label="Daisy selected">Daisy selected</span>
        </FluentCheckbox>
        <FluentCheckbox @bind-Value=SunflowerSelected>
            <span aria-label="Sunflower selected">Sunflower selected</span>
        </FluentCheckbox>
        <FluentCheckbox @bind-Value=RoseSelected>
            <span aria-label="Rose selected">Rose selected</span>
        </FluentCheckbox>
    </FluentStack>
</FluentStack>

@code
{
    bool FlowersExpanded = true;
    bool PlanesExpanded = true;

    bool DaisySelected = false;
    bool SunflowerSelected = true;
    bool RoseSelected = false;
}